/**
 * 用户登录
 */

import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Alert, message } from 'antd';
import { useIntl, history, connect } from 'umi';
import { menuDataList } from '@/utils';
import menuTitleList from '@/constants/menuTitleList';
import logo from '@/assets/images/login.png';
import styles from './index.less';

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = (props) => {
  const { dispatch } = props;
  const { formatMessage } = useIntl();

  const handleSubmit = async (values) => {
    // 登录
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
      },
      callback: async (res) => {
        const menuList = await menuDataList(menuTitleList, formatMessage)?.[0]?.children;

        const hasChilOne = menuList?.[0]; // 一级菜单
        const chilOnePath = menuList?.[0]?.path;

        const hasChilTwo = menuList?.[0]?.children?.[0]; // 二级菜单
        const chilTwoPath = menuList?.[0]?.children?.[0]?.path;

        const hasChilThree = menuList?.[0]?.children?.[0]?.children?.[0]; // 三级菜单
        const chilThreePath = menuList?.[0]?.children[0]?.children?.[0]?.path;

        if (res && res.user && res.user.id) {
          if (hasChilOne) {
            if (hasChilTwo) {
              if (hasChilThree) {
                // TODO 四级菜单暂未判断
                history.push(chilThreePath);
              } else {
                history.push(chilTwoPath);
              }
            } else {
              history.push(chilOnePath);
            }
            message.success('登录成功！');
          } else {
            history.push('/404');
          }
        }
      },
    });
  };

  return (
    <div className={styles.container}>
      <div className={styles.main}>
        <div className={styles.title}>
          <img
            style={{
              width: '180px',
              height: '50px',
            }}
            src={logo}
          />
        </div>
        <LoginForm
          onFinish={async (values) => {
            await handleSubmit(values);
          }}
        >
          <div
            style={{
              marginTop: '20px',
            }}
          >
            {status === 'error' && <LoginMessage content="账户或密码错误（admin/ant.design）" />}
            <ProFormText
              name="username"
              placeholder="账号名：test001"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              rules={[
                {
                  required: true,
                  message: '请输入登录名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              placeholder="密码：111111"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />,
              }}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </div>
        </LoginForm>
      </div>
    </div>
  );
};

export default connect(({}) => ({}))(Login);
